<!-- 已购订单 -->
<template>
	<view class="order-page">
		<view class="status-tabs">
			<u-tabs-swiper ref="tabs" :list="statusTabs" :current="current" @change="statusChange" inactive-color="#666666"
				:active-color="config.mainColor" :active-item-style="activeItemStyle"></u-tabs-swiper>
		</view>
		<swiper :style="{height:height}" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tab , idx) in statusTabs" :key="idx">
				<orderScrollItem ref="mescrollItem" orderType="buy" :i="idx" :index="current" :tabs="statusTabs"
					:height="height"></orderScrollItem>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		statusTabs
	} from "@/common/enum.js"
	import orderScrollItem from './components/order-scroll-item.vue'
	export default {
		components: {
			orderScrollItem
		},
		data() {
			return {
				height: '',
				statusTabs: statusTabs,
				current: 0,
				swiperCurrent: 0,
				activeItemStyle: {
					color: "#333333"
				},
				config: this.$appConfig
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight - 45 + 'px'
		},
		onShow() {
			if (this.canReset) {
				let curMescroll = this.getMescroll(this.current)
				curMescroll && curMescroll.resetUpScroll()
			}
			this.canReset = true
		},
		methods: {
			// 获取指定下标的mescroll对象
			getMescroll(i) {
				let mescrollItems = this.$refs.mescrollItem;
				if (mescrollItems) {
					let item = mescrollItems[i]
					if (item) return item.mescroll
				}
				return null
			},
			statusChange(index) {
				this.swiperCurrent = index
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			reachBottom() {}
		}
	}
</script>

<style scoped lang="scss">
	.order-page {
		// display: flex;
		// flex-direction: column;
		// height: 100vh;
	}

	.swiper-item {
		// height: 100%;
	}

	.page-box {
		padding: 30rpx;

		.order {
			margin-bottom: 30rpx;
		}
	}
</style>